<template>
  <div class="exper_main">
    <head-top head-title="申请体验" go-back="true"></head-top>
    <!--申请模块-->
    <div class="apply_box" v-show="whetherShow">
      <li class="li_li border-bottom">
        <span>姓名：</span>
        <input type="text" placeholder="请输入真实姓名" v-model.trim="rName">
      </li>
      <li class="li_li border-bottom">
        <span>电话：</span>
        <input type="tel" maxlength="11" v-model.trim="phoneNumber" placeholder="请输入手机号码">
      </li>
      <li class="li_li teshu">
        <span>验证码&nbsp;:</span>
        <input class="code_input" type="tel" placeholder="请输入验证码" v-model.trim="codeNumber" maxlength="4">
        <div class="btn">
          <mt-button @click="getCode" type="primary" :disabled="time ==0 || time==60 ? false : true ">
            <span v-show="sendMsgDisabled">{{time + 's后获取'}}</span>
            <span v-show="!sendMsgDisabled">{{msg}}</span>
          </mt-button>
        </div>
      </li>
      <div class="btn_row">
        <button @click="submit_post">
          <span>提交</span>
        </button>
      </div>
    </div>

    <!--信息展示模块-->
    <div class="apply_box" v-show="villageShow">
      <li class="li_li border-bottom">
        <span>姓名：</span>
        <input type="text" readonly="readonly" v-model="gainData.real_name">
      </li>
      <li class="li_li border-bottom">
        <span>电话：</span>
        <input type="tel" readonly="readonly" v-model="gainData.phone">
      </li>
      <li class="li_li border-bottom">
        <span>体验小区：</span>
        <input type="text" readonly="readonly" v-model="gainData.areas">
      </li>
      <li class="li_li border-bottom">
        <span>体验房屋：</span>
        <span class="input_span">{{gainData.house_num}}</span>
      </li>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header'
  import { Toast, MessageBox, Indicator } from 'mint-ui'
  import { getPhoneCode, whetherApply, postApply } from '../../api/my'

  export default {
    name: 'Experience',
    data () {
      return {
        whetherShow: false, // 是否显示申请
        villageShow: false, // 小区房屋信息是否显示
        rName: '', // 姓名
        phoneNumber: '', // 电话
        codeNumber: '', // 验证码
        msg: '获取验证码',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false,  // 按钮上的显示文本（false:显示为时间跳动的文本  true:显示为发送验证码）
        applyVillage: '体验小区',
        gainData: {} // 获取内容
      }
    },
    created () {
      this._whetherApply()
    },
    methods: {
      // 判断是否可以体验
      _whetherApply () {
        whetherApply().then(res => {
          // console.log(res)
          // 已经有测试房屋了
          if (res.code === 200) {
            this.gainData = res.data
            this.villageShow = true // 显示信息模块开启
            this.whetherShow = false // 申请模块关闭
          }
          // 没有测试房屋，进行申请
          if (res.code === 400) {
            this.whetherShow = true // 申请模块开启
            this.villageShow = false // 显示信息模块关闭
          }
        })
      },
      // 获取验证码
      getCode () {
        if (!this.phoneNumber) {
          Toast({
            message: '请输入正确的号码',
            position: 'middle',
            duration: 1000
          })
          return
        } else {
          getPhoneCode(this.phoneNumber).then(res => {
            // console.log(res)
            if (res.code === 200) {
              Toast({
                message: res.data,
                position: 'middle',
                duration: 1000
              })
            }
            if (res.code === 400) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
            }
          })
          let me = this
          me.sendMsgDisabled = true  // 点击时变成true 那么就是显示多少秒后获取
          let interval = window.setInterval(function () {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(interval)
            }
            me.msg = '重新获取'
          }, 1000)
        }
      },
      // 提交
      submit_post () {
        if (!this.rName) {
          Toast({
            message: '请输入真实姓名！',
            position: 'middle',
            duration: 1000
          })
          return
        }
        if (!this.phoneNumber) {
          Toast({
            message: '请输入电话号码',
            position: 'middle',
            duration: 1000
          })
          return
        }
        if (!this.codeNumber) {
          Toast({
            message: '请输入验证码',
            position: 'middle',
            duration: 1000
          })
          return
        }
        Indicator.open({
          text: '..提交中..',
          spinnerType: 'fading-circle'
        })
        postApply(this.rName, this.phoneNumber, this.codeNumber).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            this.gainData = res.data
            MessageBox.alert(res.error)
            this.villageShow = true // 显示信息模块开启
            this.whetherShow = false // 申请模块关闭
          }
          if (res.code === 400) {
            Indicator.close()
            MessageBox.alert(res.error)
            this.villageShow = false // 显示信息模块关闭
            this.whetherShow = true // 申请模块开启
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .exper_main {
    width: 100%;
    padding-top: 40px;
    .apply_box {
      padding: 0 10px;
      .li_li {
        font-size: 1.3em;
        height: 48px;
        line-height: 48px;
        position: relative;
        width: 100%;
        span {
          font-size: 1.3rem;
          color: #333333;
        }
        .input_span{
          font-size: 1.2rem;
          color: #333;
        }
        input {
          width: 42%;
          border: none;
          outline: none;
          font-size: 1.2rem;
          color: #333;
          &.code_input {
            width: 30%;
          }
        }
        &.teshu {
          display: flex;
          span {
            flex: 0 0 80px;
          }
          .code_input {
            flex: 1;
            padding: 0;
            height: 47px;
            line-height: 47px;
          }
          .btn {
            flex: 1;
            text-align: center;
          }
        }
      }
      .btn {
        float: right;
        .mint-button {
          font-size: 14px;
          height: 30px;
        }
        .mint-button--primary {
          background-color: #26A5FF;
          border: 1px solid #26A5FF;

          .mint-button-text {
            span {
              color: #fff;
              font-size: 1.2rem;
            }
          }
        }
        .mint-button--normal {
          padding: 0 10px;
        }
      }
      .btn_row {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
        button {
          width: 90%;
          height: 44px;
          background: #26A5FF;
          outline: none;
          border: none;
          border-radius: 5px;
          margin-top: 40%;
          span {
            font-size: 15px;
            color: #fff;
          }
        }
      }
    }

  }
</style>
